import React, { Component } from 'react'

interface IProps {
  name: string,
  age?: number,
}
interface IState {
  counter: number
}
export default class Lee extends Component<IProps, IState> {
  constructor(props: any, content: any) {
    super(props);
    this.state = {
      counter: 2
    }
    // state  更新是异步的
  }
  componentDidMount() {
    //会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。
    //如需通过网络请求获取数据，此处是实例化请求的好地方。
    //这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅
    // 你可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。
    //如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。
    //通常，你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置，
    //比如实现 modals 和 tooltips 等情况下，你可以使用此方式处理

    //setState 实际做了什么？ setState() 会对一个组件的 state 对象安排一次更新。当 state 改变了，该组件就会重新渲染。
    //不要指望在调用 setState 之后，this.state 会立即映射为新的值。如果你需要基于当前的 state 来计算出新的值，
    //那你应该传递一个函数，而不是一个对象（详情见下文）。
    // this.setState((state, props) => {
    //   counter: state.counter + 1
    // })
    // this.setState({counter: this.state.count + 1}); 注意：这样 *不会* 像预期的那样工作。
    //给 setState 传递一个对象与传递一个函数的区别是什么？
    //传递一个函数可以让你在函数内访问到当前的 state 的值。
    //因为 setState 的调用是分批的，所以你可以链式地进行更新，并确保它们是一个建立在另一个之上的，这样才不会发生冲突：
    // this.setState((state) => {
    //    重要：在更新的时候读取 `state`，而不是 `this.state`。
    //   return {count: state.count + 1}
    // });
  }
  render() {
    return (
      <>
        <h1>{this.state.counter}</h1>
        <h1>{this.props.name}</h1>
        <h1>{this.props.age}</h1>
      </>)
  }
}